<template>
  <div class="search-pweight">
    <n-space justify="space-around">
      <n-space vertical style="width: 40vw">
        <n-gradient-text
          type="info"
          :size="35"
          style="padding: 0 4vw; margin-bottom: 3vh"
        >
          矩阵判断页面
          <n-divider></n-divider>
        </n-gradient-text>
        <div class="left">
          <n-button
            :bordered="false"
            @click="setting = !setting"
            style="position: relative; top: -1vh; left: 36vw"
          >
            <n-icon size="x-large">
              <setting-icon></setting-icon>
            </n-icon>
          </n-button>
          <n-collapse-transition :collapsed="setting">
            <n-h4 prefix="bar"
              ><n-text type="primary">矩阵构造方法</n-text></n-h4
            >
            <n-radio-group v-model:value="select1" matrixId="radiobuttongroup1">
              <n-radio-button
                v-for="item in items1"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </n-radio-button>
            </n-radio-group>
            <n-h4 prefix="bar"><n-text type="primary">有限域</n-text></n-h4>
            <n-radio-group v-model:value="select2" matrixId="radiobuttongroup2">
              <n-radio-button
                v-for="item in items2"
                :key="item.value"
                :value="item.value"
              >
                <n-text v-html="item.label"></n-text>
              </n-radio-button>
            </n-radio-group>
            <n-h4 prefix="bar"><n-text type="primary">矩阵大小</n-text></n-h4>
            <n-radio-group v-model:value="select3" matrixId="radiobuttongroup3">
              <n-radio-button
                v-for="item in items3"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </n-radio-button>
            </n-radio-group>
          </n-collapse-transition>
          <n-divider v-if="setting"></n-divider>
          <n-space justify="center">
            <div class="matrix">
              <n-grid :x-gap="0" :y-gap="0" :cols="select3 + 3">
                <n-grid-item
                  v-for="(item, index) in (select3 + 3) * (select3 + 3)"
                  class="m-grid"
                >
                  <n-input></n-input>
                </n-grid-item>
              </n-grid>
            </div>
          </n-space>
        </div>
      </n-space>
      <div class="right">
        <n-space vertical>
          <n-space justify="center">
            <n-radio-group
              v-model:value="checkedValue"
              matrixId="radiobuttongroup4"
            >
              <n-radio-button value="32" :key="32"> 32*32 </n-radio-button>
              <n-radio-button value="4" :key="4">
                4*4
              </n-radio-button></n-radio-group
            >
          </n-space>
          <n-space justify="center" style="margin-top: 2vh">
            <div class="matrix2"></div>
          </n-space>
          <n-divider></n-divider>
          <n-data-table ref="table" :columns="columns" :data="data">
          </n-data-table>
        </n-space>
      </div>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

import { Settings as SettingIcon } from '@vicons/ionicons5';

const setting = ref(false);
const checkedValue = ref('32');
const select1 = ref(1);
const items1 = [
  {
    value: 1,
    label: 'Toeplitz矩阵构造方法',
  },
  {
    value: 2,
    label: '对合矩阵构造方法',
  },
  {
    value: 3,
    label: '循环矩阵构造方法',
  },
];

const select2 = ref(1);
const items2 = [
  {
    value: 1,
    label: 'GF(2, 4)',
  },
  {
    value: 2,
    label: 'GF(2, 8)',
  },
];

const select3 = ref(1);
const items3 = [
  {
    value: 1,
    label: '4*4',
  },
  {
    value: 2,
    label: '5*5',
  },
  {
    value: 3,
    label: '6*6',
  },
];
const height = computed(() => {
  return (50 / (select3.value + 3)).toString() + 'vh';
});

const columns = [
  {
    title: '矩阵序号',
    key: 'matrixId',
    defaultSortOrder: 'ascend',
    sorter: 'default',
  },
  {
    title: 'Hamming重量',
    key: 'weight',
    sorter: (row1, row2) => row1.weight - row2.weight,
  },
  {
    title: 'XORs数',
    key: 'xors',
    sorter: (row1, row2) => row1.xors - row2.xors,
  },
  {
    title: '是否对合',
    key: 'duihe',
    sorter: (row1, row2) => {
      let index1 = row1.duihe === '是' ? 1 : 0;
      let index2 = row2.duihe === '是' ? 1 : 0;
      return index1 - index2;
    },
  },
];

const data = [
  {
    matrixId: 0,
    weight: 32,
    xors: 1,
    duihe: '是',
  },
  {
    matrixId: 1,
    weight: 42,
    xors: 21,
    duihe: '是',
  },
  {
    matrixId: 2,
    weight: 32,
    xors: 5,
    duihe: '是',
  },
  {
    matrixId: 3,
    weight: 32,
    xors: 100,
    duihe: '否',
  },
];
</script>

<style scoped>
.search-pweight {
  padding: 4vh 4vw 3vh;
}
.left,
.right {
  width: 42vw;
  border: 2px solid #f1f1f1;
  box-sizing: border-box;
  padding: 3vh 2vw;
  border-radius: 2vw;
}
.left {
  min-height: 70vh;
}
.right {
  margin-top: 2vh;
  min-height: 86vh;
}
.right .n-radio-button {
  width: 15vw;
  text-align: center;
}
.matrix {
  background-color: #f1f1f1;
  width: 50vh;
  height: 50vh;
}
.matrix2 {
  background-color: #f1f1f1;
  width: 50vh;
  height: 50vh;
}
.m-grid {
  height: v-bind(height);
}
</style>
